<template>
<div>
  <el-button  size="small"
              type="primary"
             @click="outExcel">导出Execl文件   <i class="el-icon-upload"/></el-button>
</div>
</template>

<script>

export default {
  props:["title"]   //可以是数组，也可以是对象
,
  name: "Execl",
  methods:{
    outExcel(){
      const loading = this.$loading({
        lock: true,
        text: '努力加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
                        //restuful     当要导入哪张表的时候 在 testExprotExcelx 后面加入 表名Task
     this.$http({
        method: 'get',
        url: '/testExprotExcelx/'+this.title+'',
        responseType: 'blob'
      }).then((res) => {
        const content = res.data
        const blob = new Blob([content])//构造一个blob对象来处理数据
        const fileName = 'test.xlsx'
        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        //IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) { //支持a标签download的浏览器
          const link = document.createElement('a')//创建a标签
          link.download = fileName//a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()//执行下载
          URL.revokeObjectURL(link.href) //释放url
          document.body.removeChild(link)//释放标签
        } else { //其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
        loading.close()
        // eslint-disable-next-line no-unused-vars
      }, (error) => {
        this.$message.error('请求异常');
        loading.close()
      })
    }
  }

}
</script>

<style scoped>
.btn
{
  border-right: #2C59AA 1px solid;
  padding-right: 2px;
  border-top: #2C59AA 1px solid;
  padding-left: 2px;
  font-size: 12px;
  FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,  StartColorStr=#ffffff,  EndColorStr=#D7E7FA);
  border-left: #2C59AA 1px solid;
  cursor: hand;
  color: black;
  padding-top: 2px;
  border-bottom: #2C59AA 1px solid;
}
</style>